<template>
  <div id="list">
    <div class="list-content">
      <div class="sel-add-content">
        <div>
          <el-select v-model="sel_shop_id" placeholder="请选择">
            <el-option
              v-for="(item, index) in shops"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="sel_type_id" placeholder="请选择">
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <el-button type="primary" plain @click="addFood()">添加菜色</el-button>
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="food_id" label="编号" width="150">
        </el-table-column>
        <el-table-column prop="food_name" label="菜名" width="200">
        </el-table-column>
        <el-table-column prop="food_price" label="单价" width="150">
        </el-table-column>
        <el-table-column prop="shop_name" label="店名" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editFood(scope.$index)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="deleteFood(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="餐厅名" :label-width="formLabelWidth">
            <el-select v-model="form.shop_id" placeholder="请选择餐厅">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in shops"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜名" :label-width="formLabelWidth">
            <el-input v-model="form.food_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单价" :label-width="formLabelWidth">
            <el-input v-model="form.food_price" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleUpdate()">取 消</el-button>
          <el-button type="primary" @click="updateMenu()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      activeName: "first",
      tableData: [],
      dialogFormVisible: false,
      form: {
        shop_id: null,
        food_price: "",
        food_name: "",
        food_id: -1,
      },
      shops: [],
      types: [],
      formLabelWidth: "120px",
      dialogTitle: "",
      sel_shop_id: null,
      sel_type_id: null,
    };
  },
  created() {
    this.getList();
    // 获取所有餐厅名-给编辑和添加菜单使用
    this.$axios
      .get("http://127.0.0.1:8080/CollegeOrder/getShops")
      .then(
        function(res) {
          this.shops = res.data;
        }.bind(this)
      )
      .catch((err) => {
        console.log(err);
      });
    // 获取所有餐厅类型
    this.$axios
      .get("http://127.0.0.1:8080/CollegeOrder/getTypes")
      .then(
        function(res) {
          this.types = res.data;
        }.bind(this)
      )
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    tableRander(arr) {
      this.tableData = [];
      for (let o of arr) {
        var item = {
          food_id: o.id,
          food_name: o.name,
          shop_name: o.shop.name,
          shop_id: o.shop.id,
          type_id: o.shop.type.id,
          food_price: o.price,
        };
        this.tableData.push(item);
      }
    },
    deleteFood(i) {
      var id = this.tableData[i].food_id;
      this.$confirm("确认删除此菜单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: `http://localhost:8080/CollegeOrder/deleteFood?id=${id}`,
          })
            .then(
              function(res) {
                if (res.data.count) {
                  console.log(res.data.count);
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getList();
                } else {
                  this.$message({
                    type: "failure",
                    message: "删除失败!",
                  });
                }
              }.bind(this)
            )
            .catch(
              function(err) {
                this.$message({
                  type: "failure",
                  message: "删除失败!",
                });
              }.bind(this)
            );
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editFood(i) {
      this.dialogFormVisible = true;
      this.dialogTitle = "编辑菜色";
      // 获取所有的餐厅名字
      var obj = this.tableData[i];
      this.form.shop_id = obj.shop_id;
      this.form.food_price = obj.food_price;
      this.form.food_name = obj.food_name;
      this.form.food_id = obj.food_id;
    },
    addFood() {
      this.dialogFormVisible = true;
      this.dialogTitle = "添加菜色";
    },
    getList() {
      this.$axios
        .get("http://127.0.0.1:8080/CollegeOrder/list")
        .then(
          function(res) {
            this.tableRander(res.data);
          }.bind(this)
        )
        .catch((err) => {
          console.log(err);
        });
    },
    updateMenu() {
      this.dialogFormVisible = false;
      var params = {
        food_price: this.form.food_price,
        food_name: this.form.food_name,
        food_id: this.form.food_id,
        shop_id: this.form.shop_id,
      };
      if (
        params.food_price == "" ||
        params.food_name == "" ||
        params.shop_id == null
      ) {
        this.$message.error("请重试");
        return;
      }
      if (params.food_id == -1) {
        this.$axios({
          url: "http://127.0.0.1:8080/CollegeOrder/addFood",
          method: "POST",
          data: qs.stringify(params),
        })
          .then(
            function(res) {
              console.log(res);
            }.bind(this)
          )
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$axios({
          url: "http://127.0.0.1:8080/CollegeOrder/updateFood",
          method: "POST",
          data: qs.stringify(params),
        })
          .then(
            function(res) {
              console.log(res.data);
            }.bind(this)
          )
          .catch((err) => {
            console.log(err);
          });
      }
      this.getList();
      this.clearForm();
    },
    clearForm() {
      this.form = {
        shop_id: null,
        food_price: "",
        food_name: "",
        food_id: -1,
      };
    },
    cancleUpdate() {
      this.dialogFormVisible = false;
      this.clearForm();
    },
    selUpdateList() {
      var params = {
        type_id: this.sel_type_id,
        shop_id: this.sel_shop_id,
      };
      this.$axios({
        url: "http://127.0.0.1:8080/CollegeOrder/selUpdateList",
        method: "POST",
        data: qs.stringify(params),
      })
        .then(
          function(res) {
            this.tableRander(res.data);
          }.bind(this)
        )
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    sel_shop_id() {
      this.selUpdateList();
    },
    sel_type_id() {
      this.selUpdateList();
    },
  },
};
</script>

<style></style>
